<h3>{{ 'components.design-font.fontDemo.instance.title' | translate }}</h3>

<div>
  <span class="page-first-card-title">{{ 'components.design-font.fontDemo.instance.description1' | translate }}</span>
</div>
<div>
  <span class="content">{{ 'components.design-font.fontDemo.instance.description2' | translate }}</span>
</div>

<h3>{{ 'components.design-font.fontDemo.instance.tableTitle' | translate }}</h3>
<d-tabs [type]="'tabs'" [(activeTab)]="activeTab">
  <d-tab id="curFont" title="{{ 'components.design-font.fontDemo.instance.defaultTable.tab' | translate }}" tabId="curFont">
    <ng-template dTabContent>
      <d-data-table #datatable [dataSource]="fonts" [scrollable]="true" [type]="'striped'">
        <d-column
          field="name"
          header="{{ 'components.design-font.fontDemo.instance.defaultTable.fontName' | translate }}"
          [width]="'150px'"
        >
        </d-column>
        <d-column
          field="value"
          header="{{ 'components.design-font.fontDemo.instance.defaultTable.fontValue' | translate }}"
          [width]="'150px'"
        ></d-column>
        <d-column
          field="description"
          header="{{ 'components.design-font.fontDemo.instance.defaultTable.description' | translate }}"
          [width]="'200px'"
        >
        </d-column>
      </d-data-table>
    </ng-template>
  </d-tab>
  <d-tab id="oldFont" title="{{ 'components.design-font.fontDemo.instance.oldTable.tab' | translate }}" tabId="oldFont">
    <ng-template dTabContent>
      <d-data-table #datatable [dataSource]="oldFonts" [scrollable]="true" [type]="'striped'">
        <d-column field="name" header="{{ 'components.design-font.fontDemo.instance.oldTable.fontName' | translate }}" [width]="'150px'">
        </d-column>
        <d-column
          field="newName"
          header="{{ 'components.design-font.fontDemo.instance.oldTable.newFontName' | translate }}"
          [width]="'150px'"
        >
        </d-column>
        <d-column
          field="value"
          header="{{ 'components.design-font.fontDemo.instance.oldTable.fontValue' | translate }}"
          [width]="'150px'"
        ></d-column>
        <d-column
          field="description"
          header="{{ 'components.design-font.fontDemo.instance.oldTable.description' | translate }}"
          [width]="'200px'"
        >
        </d-column>
      </d-data-table>
    </ng-template>
  </d-tab>
</d-tabs>
